﻿@page "/butil/location"
@inherits AppComponentBase
@inject Bit.Butil.Location location

<PageOutlet Url="butil/location"
            Title="Location - Butil"
            Description="Location class of the bit Butil" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Location</BitText>
    <br />
    <BitText Typography="BitTypography.Subtitle1" Gutter>
        How to use the Location class of the bit Butil?
    </BitText>
    <br />

    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
        <div class="section-card-txt">
            To use the browser location features you need to inject the Bit.Butil.Location class and use it like this:
<CodeBox HideCopyButton>
@@inject Bit.Butil.Location location

@@code {
    await location.Reload();
}</CodeBox>
        </div>
    </section>

    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
        <div class="section-card-txt">
            <br />
            <b>SetHref</b>, <b>GetHref</b>: <br />
            Gets/Sets the href of the location and then the associated document navigates to the new page
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @hrefExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newHref" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetHref">SetHref</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetHref">GetHref</BitButton>
                        <br />
                        <br />
                        <div>Href: @currentHref</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetProtocol</b>, <b>GetProtocol</b>: <br />
            Gets/Sets a string containing the protocol scheme of the URL, including the final ':'
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @protocolExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newProtocol" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetProtocol">SetProtocol</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetProtocol">GetProtocol</BitButton>
                        <br />
                        <br />
                        <div>Protocol: @currentProtocol</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetHost</b>, <b>GetHost</b>: <br />
            Gets/Sets a string containing the host, that is the hostname, a ':', and the port of the URL
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/host" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @hostExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newHost" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetHost">SetHost</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetHost">GetHost</BitButton>
                        <br />
                        <br />
                        <div>Host: @currentHost</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetHostname</b>, <b>GetHostname</b>: <br />
            Gets/Sets the hostname of the location and then the associated document navigates to the new page
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hostname" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @hostnameExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newHostname" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetHostname">SetHostname</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetHostname">GetHostname</BitButton>
                        <br />
                        <br />
                        <div>Hostname: @currentHostname</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetPort</b>, <b>GetPort</b>: <br />
            Gets/Sets the port of the location and then the associated document navigates to the new page
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/port" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @portExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newPort" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetPort">SetPort</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetPort">GetPort</BitButton>
                        <br />
                        <br />
                        <div>Port: @currentPort</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetPathname</b>, <b>GetPathname</b>: <br />
            Gets/Sets a string containing an initial '/' followed by the path of the URL, not including the query string or fragment
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @pathnameExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newPathname" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetPathname">SetPathname</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetPathname">GetPathname</BitButton>
                        <br />
                        <br />
                        <div>Pathname: @currentPathname</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetSearch</b>, <b>GetSearch</b>: <br />
            Gets/Sets a string containing a '#' followed by the fragment identifier of the URL
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @searchExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newSearch" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetSearch">SetSearch</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetSearch">GetSearch</BitButton>
                        <br />
                        <br />
                        <div>Search: @currentSearch</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetHash</b>, <b>GetHash</b>: <br />
            Gets/Sets the hash of the location and then the associated document navigates to the new page
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @hashExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newHash" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetHash">SetHash</BitButton>
                        &nbsp;
                        <BitButton OnClick="@GetHash">GetHash</BitButton>
                        <br />
                        <br />
                        <div>Hash: @currentHash</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>GetOrigin</b>: <br />
            Returns a string containing the canonical form of the origin of the specific location
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/origin" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @originExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitButton OnClick="@GetOrigin">GetOrigin</BitButton>
                        <br />
                        <br />
                        <div>Origin: @currentOrigin</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>Assign</b>: <br />
            Loads the resource at the URL provided in parameter
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @assignExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newAssign" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetAssign">Assign</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>Reload</b>: <br />
            Reloads the current URL, like the Refresh button
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/reload" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @reloadExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitButton OnClick="@(() => location.Reload())">Reload</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>Replace</b>: <br />
            Replaces the current resource with the one at the provided URL (redirects to the provided URL)
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @replaceExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="newReplace" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@SetReplace">Replace</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
        </div>
    </section>
</div>

<NavigationButtons Prev="Navigator" PrevUrl="/butil/navigator" Next="Screen" NextUrl="/butil/screen" />
